<template>
     <table class="emphasis-table" >
        <tr v-for="(v,i) in list" :key="i">
            <th :style="`text-align:${thTextAlign};width:${thWidth}`" 
                v-html="v.name"></th>
            <td :class="{'hit':v.isHit,'font-underline':v.isUnderline}" 
                :style="`text-align:${tdTextAlign};width:${tdWidth}`" 
                v-html="v.text"></td>
        </tr>
    </table>
</template>
<style lang="less" rel="stylesheet/less" scoped>    
    .emphasis-table{
        width: 100%;
        margin-top: 10px;
        td,th{
            border: 1px solid #eee;
            padding: 10px;
            width: 50%;
        }
        & tr:nth-child(even) th,& tr:nth-child(even) td{
            background: #F9FAFA;
        }
        .font-underline{
            text-decoration:underline;
        }
        .hit{
            color: #409EFF !important;
        }
    }
</style>
<script>
/*
  thTextAlign,th的文本水平位置
  tdTextAlign,td的文本水平位置
  tdWidth
  thWidth
  接受一个数组对象作为初始配置项，例如
  list: [{
    name: '名称', 必填
    text: '2000', 必填
    isHit: true, 可选。
    isUnderline: true, 可选。是否添加文字下划线
  }]
*/
export default {
    props:{
        thWidth:{
             type:String,
             default:'50%' 
        },
        tdWidth:{
             type:String,
             default:'50%' 
        },
        thTextAlign:{
            type:String,
            default:'right'
        },
        tdTextAlign:{
            type:String,
            default:'left'
        },
        list:{
            type:Array,
            required:true
        }
    },
    created() {
    },
    data() {
        return {
        }
    },
}
</script>

